<template>
    <div class="screen-block">
        <Title>{{ $t('screen.saleTrend') }}</Title>
        <div style="width: 100%; height: 100%">
            <Charts :option="option" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { reactive, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { Charts } from '@kjgl77/datav-vue3';
    import useTimeExecutor from '@/hooks/useTimeExecutor';
    import Title from '../title.vue';
    import { querySaleTrend } from '../../service';

    const { t } = useI18n();

    const option = reactive({
        xAxis: {
            splitLine: {
                show: false,
            },
            // name: '第一周',
            data: ['第一周'],
            axisLabel: {
                style: {
                    fill: '#fff',
                },
            },
        },
        yAxis: {
            data: 'value',
            splitLine: {
                show: false,
            },
            min: 0,
            nameTextStyle: {
                fill: '#fff',
            },
            axisLabel: {
                style: {
                    fill: '#fff',
                },
            },
        },
        series: [
            {
                data: [0],
                type: 'bar',
                barWidth: 30,
                backgroundBar: {
                    show: true,
                },
            },
        ],
        color: ['#00baff', '#3de7c9', '#fff', '#ffc530', '#469f4b'],
    });
    const fetchData = async () => {
        const data = await querySaleTrend();
        const { result } = data as any;
        option.xAxis.data.length = 0;
        option.series[0].data.length = 0;
        result.forEach((aa: { tradeDate: string; totalAmount: string }) => {
            option.xAxis.data.push(aa.tradeDate);
            option.series[0].data.push(parseFloat(aa.totalAmount));
        });
        // console.log(option.xAxis.data);
        // console.log(option.series[0].data);
    };
    // fetchData();
    useTimeExecutor({
        second: 10,
        immediate: true,
        func: fetchData,
    });
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;
    }
</style>
